<template>
  <div class="wrap">
    <div class="btn-box">
      <el-button type="primary" @click="uploadFileClick">上传文件</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="bookName" label="图书名称"/>
      <el-table-column prop="author" label="作者"/>
      <el-table-column prop="coverPicture" label="封面"/>
      <el-table-column prop="" label="操作"/>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="新增图书信息"
        width="800"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="图书名称">
              <el-input v-model="bookForm.bookName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="作者">
              <el-input v-model="bookForm.author"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="封面图片">

              <el-upload
                  ref="uploadRef"
                  :on-change="handleChange"
                  class="upload-demo"
                  :auto-upload="false"
              >
                <template #trigger>
                  <el-button type="primary" size="small">选择文件</el-button>
                </template>
              </el-upload>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {uploadFile} from "../network/http.js";

let tableData = ref([]);
let dialogVisible = ref(false);
let bookForm = ref({
  bookName: "",
  author: "",
  file: "",
})

const handleChange = (file) => {
  bookForm.value.file = file.raw;
}

const uploadFileClick = () => {
  dialogVisible.value = true;
}

const submit = async () => {
  const formData = new FormData();
  formData.append("bookName", bookForm.value.bookName);
  formData.append("author", bookForm.value.author);
  formData.append("file", bookForm.value.file);
  const res = await uploadFile("/book/saveBook", formData);
}

</script>

<style scoped>
.wrap {
  width: 1400px;
}

.btn-box {
  margin: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
</style>